<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    description: "福建艺术机构云连锁poi月卡",
    money: "+850元",
    type: 1,
    createdAt: "2021-09-01 10:00:00",
    updatedAt: "2021-09-01 10:00:00",
    updater: "李小红"
  },
  {
    description: "惠州峰会酒店",
    money: "-138元",
    type: 2,
    createdAt: "2021-09-01 10:00:00",
    updatedAt: "2021-09-01 10:00:00",
    updater: "李小红"
  },
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
  if (action === 'add') {
    modalVisible.value = true;
  }
};
</script>

<template>
  <umrp-container :gap="16" bg-color="#f2f2f2" height="100%" padding="16px">
    <umrp-breadcrumb :items="['财务管理', '财务流水']"></umrp-breadcrumb>
    <umrp-row :gutter="10">
      <umrp-col :span="8">
        <umrp-card :border="false">
          <umrp-statistic value="1999" title="本月收入(元)" extra="总计：19999.00元"></umrp-statistic>
        </umrp-card>
      </umrp-col>
      <umrp-col :span="8">
        <umrp-card :border="false">
          <umrp-statistic value="1999" title="本月支出(元)" extra="总计：19999.00元"></umrp-statistic>
        </umrp-card>
      </umrp-col>
      <umrp-col :span="8">
        <umrp-card :border="false">
          <umrp-statistic value="1999" title="本月盈利(元)" extra="总计：1000.00元"></umrp-statistic>
        </umrp-card>
      </umrp-col>
    </umrp-row>
    <umrp-search-card>
      <umrp-row :gutter="16">
        <umrp-col :span="8">
          <umrp-form-item label="资金明细">
            <umrp-input placeholder="请输入资金明细"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="资金类型">
            <umrp-select>
              <umrp-option value="1">支出</umrp-option>
              <umrp-option value="2">收入</umrp-option>
            </umrp-select>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="录入时间">
            <umrp-datepicker-range></umrp-datepicker-range>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card :border="false">
      <umrp-table :action-bar="true" :data="dataList" @action="handleAction">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="资金明细" data-index="description"></umrp-table-column>
          <umrp-table-column title="金额(元)" slot-name="money"></umrp-table-column>
          <umrp-table-column title="操作人" data-index="updater"></umrp-table-column>
          <umrp-table-column title="录入时间" data-index="createdAt" :width="160"></umrp-table-column>
          <umrp-table-column title="最后更新" data-index="updatedAt" :width="160"></umrp-table-column>
          <umrp-table-column slot-name="action" title="操作" :width="120"></umrp-table-column>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
            <umrp-popconfirm message="您确认删除么？">
              <umrp-button type="danger">删除</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
        <template #money="{ record }">
          <umrp-text color="red" v-if="record.type === 1">{{ record.money }}</umrp-text>
          <umrp-text color="#6DD400" v-else="">{{ record.money }}</umrp-text>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
  <umrp-modal width="500px" v-model:visible="modalVisible">
    <umrp-container padding="16px 0">
      <umrp-form>
        <umrp-form-item label="资金明细" required>
          <umrp-input></umrp-input>
        </umrp-form-item>
        <umrp-form-item label="资金类型" required>
          <umrp-select>
            <umrp-option value="1">支出</umrp-option>
            <umrp-option value="2">收入</umrp-option>
          </umrp-select>
        </umrp-form-item>
        <umrp-form-item label="操作金额" required>
          <umrp-input-number :default-value="0"></umrp-input-number>
        </umrp-form-item>
        <umrp-form-item label="录入时间">
          <umrp-datepicker></umrp-datepicker>
        </umrp-form-item>
      </umrp-form>
    </umrp-container>
  </umrp-modal>
</template>
